<template>
  <div>
    <div>
      <v-viewer ref="view"></v-viewer>
      <el-form size="medium">
        <el-form :inline="true">
          <el-form-item label="供应商订单编号">
            <el-input v-model="manufactorCode"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="货物名称">
            <el-input v-model="productName"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="货物编号">
            <el-input v-model="productNo"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="getChildOrderList">查询</el-button>
            <el-button type="primary"
                       @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-form>
      <el-table ref="multipleTable"
                border
                stripe
                :data="childOrderList"
                tooltip-effect="dark"
                style="width: 100%">
        <el-table-column label="订单编号">
          <template slot-scope="scope">
            <span>{{scope.row.orderNo}}</span>
          </template>
        </el-table-column>
        <el-table-column label="货物编号">
          <template slot-scope="scope">
            <span>{{scope.row.productNo}}</span>
          </template>
        </el-table-column>
        <el-table-column label="供应商订单编号">
          <template slot-scope="scope">
            <span>{{scope.row.manufactorCode}}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <span>{{scope.row.statusName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            <span>{{scope.row.productName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="官网截图">
          <template slot-scope="scope">
            <pic-view :file-list="scope.row.websiteUrlList"
                      upload-class="small-upload close-delete"
                      :pic-name-list.sync="scope.row.websiteNameList"
                      :max-size="scope.row.websiteUrlList?scope.row.websiteUrlList.length:0"
                      @showImg="showImg"></pic-view>
          </template>
        </el-table-column>
        <el-table-column label="产品图片">
          <template slot-scope="scope">
            <pic-view :file-list="scope.row.productUrlList"
                      upload-class="small-upload close-delete"
                      :pic-name-list.sync="scope.row.productNameList"
                      :max-size="scope.row.productUrlList?scope.row.productUrlList.length:0"
                      @showImg="showImg"></pic-view>
          </template>
        </el-table-column>
        <el-table-column label="长宽高">
          <template slot-scope="scope">
            <span>{{scope.row.sku}}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
            <span>{{scope.row.size}}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价">
          <template slot-scope="scope">
            <span>{{scope.row.price}}</span>
          </template>
        </el-table-column>
        <el-table-column label="总价">
          <template slot-scope="scope">
            <span>{{scope.row.total}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="goto(scope.row.orderId)"
                       type="text"
                       size="small">前往订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <view-page :current-page="currentPage"
               :total="total"
               @change="pageChange"></view-page>
  </div>
</template>

<script>
import '@/style/common.scss'
import picView from '@/components/pic-viewer-up'
import vViewer from '@/components/v-viewer'
import viewPage from '@/components/pagination'
import { api } from '@/api'
import { packageImgList } from '@/utils/imgPackage'

export default {
  data() {
    return {
      brandId: this.$route.params.brandId || null,
      manufactorCode: null,
      productName: null,
      productNo: null,
      currentPage: 0,
      total: null,
      childOrderList: []
    }
  },
  activated() {
    this.getChildOrderList()
  },
  components: { picView, vViewer, viewPage },
  methods: {
    reset() {
      this.manufactorCode = null
      this.productName = null
      this.productNo = null
      this.getChildOrderList()
    },
    getChildOrderList() {
      const params = {
        brandId: this.brandId,
        manufactorCode: this.manufactorCode,
        productName: this.productName,
        productNo: this.productNo,
        pageNum: this.currentPage,
        pageSize: 10
      }
      this.$http.post(api.BRAND_ORDER, params).then(
        res => {
          if (res.result.hasContent) {
            this.childOrderList = res.result.content
            this.childOrderList.forEach(e => {
              if (e.websitePicture) {
                const websiteList = packageImgList(e.websitePicture)
                e.websiteNameList = websiteList[0]
                e.websiteUrlList = websiteList[1]
              }
              if (e.productPicture) {
                const productList = packageImgList(e.productPicture)
                e.productNameList = productList[0]
                e.productUrlList = productList[1]
              }
            })
            this.currentPage = res.result.pageNumber
            this.total = res.result.totalElements
          } else {
            this.childOrderList = []
            this.currentPage = 0
            this.total = null
          }
        }
      )
    },
    goto(id) {
      this.$router.push({
        name: 'order',
        query: {
          orderId: id
        }
      })
    },
    pageChange(page) {
      this.currentPage = page - 1
      this.getChildOrderList()
    },
    showImg(url) {
      this.$refs.view.showImg(url)
    }
  }
}
</script>
